import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Tabs, ProductCard } from 'react-vant';
import { ArrowLeft, Ellipsis } from '@react-vant/icons';
import TopTitleBar from "../../components/TopTitleBar";
import axios from '../../utils/axios.js'
import { baseURL } from "../../utils/contants.js";
import "./index.css"
const MyOrders = () => {
    const navigate = useNavigate();
    const [orderList, setOrderList] = useState([])
    const myOrdersTitleMap = [
        {
            title: '全部',
            status: ''
        },
        {
            title: '待付款',
            status: '0'
        },
        {
            title: '待确认',
            status: '1'
        },
        {
            title: '待发货',
            status: '2'
        },
        {
            title: '已发货',
            status: '3'
        },
        {
            title: '交易完成',
            status: '4'
        }
    ]
    const getOrders = (status = '') => {
        axios.get('/api/v1/order', {
            params: {
                pageNumber: 1,
                status
            }
        }).then(res => {
            if (res.data.message === 'SUCCESS') {
                setOrderList(res.data.data.list)
            }
        })
    }

    const changeTabs = (name) => {
        getOrders(name)
    }
    useEffect(() => {
        getOrders()
    }, [])
    return (
        <div className="myOrders">
            <TopTitleBar
                topTitleBarBackgroundColor='#fff'
                leftIcon={
                    <ArrowLeft onClick={() => navigate('/personalCenter')} />
                }
                intermediateContentText="我的订单"
                rightIcon={
                    <Ellipsis />
                }
            />
            <div className="mainContent">

                <Tabs
                    // sticky
                    className="myOrdersTabs"
                    type='line'
                    titleActiveColor='#1baeae'   //题选中态颜色
                    titleInactiveColor='black'  //标题默认态颜色
                    color='#1baeae'
                    onChange={
                        (name) => changeTabs(name)
                    }
                >
                    {myOrdersTitleMap.map(item => (
                        <Tabs.TabPane
                            key={item.status}
                            name={item.status}
                            title={item.title}
                        >
                            {/* 卡片标签页 {item.status} */}
                            {/* 改变的时候，把 这个 key 传递过去，然后 渲染出来！  */}

                            {
                                orderList.map(order => {
                                    return (
                                        <div key={order.orderId} onClick={() => navigate('/orderDetail', {
                                            state: {
                                                orderNo: order.orderNo
                                            }
                                        })}>
                                            <div className="ordersTitle">
                                                <div className="orderCreateTime">
                                                    订单时间：{order.createTime}
                                                </div>
                                                <div className="orderStatusString">
                                                    {order.orderStatusString}
                                                </div>
                                            </div>
                                            <div className="orderList">
                                                {
                                                    order.newBeeMallOrderItemVOS.map(
                                                        product => {
                                                            return <ProductCard
                                                                key={product.goodsId}
                                                                price={'¥' + product.sellingPrice}
                                                                desc={product.goodsIntro}
                                                                title={product.goodsName}
                                                                num={product.goodsCount}
                                                                thumb={
                                                                    String(product.goodsCoverImg).startsWith('http') ?
                                                                        product.goodsCoverImg :
                                                                        baseURL + product.goodsCoverImg
                                                                }
                                                            // onClick={() => navigate('/productDetails', {
                                                            //     state: {
                                                            //         goodsId: product.goodsId
                                                            //     }
                                                            // })}
                                                            />
                                                        }
                                                    )
                                                }
                                            </div>
                                        </div>
                                    )

                                })
                            }

                        </Tabs.TabPane>
                    ))}
                    <div className="noThingText">
                        没有更多了
                    </div>
                </Tabs>

            </div>
        </div>
    )
}

export default MyOrders;